<template>
  <div class="container h-p100">
    <div class="box box-ver h-p100">
      <empty :show="travelList.length === 0"></empty>
      <div class="box-f1 of-y-s content">
        <div @click="checkItem(index)" v-for="(item, index) in travelList" :value="item" :key="index" class="item box">
          <div class="checkbox box box-ac">
            <div :class="{'act': item.checked}" class="icon icon-checkbox"></div>
          </div>
          <div class="item-content">
            <div class="info box card-linear1">
              <div class="from box-ver box box-ac">
                <div class="area">{{item.from}}</div>
                <div class="">{{item.startDate}}</div>
              </div>
              <div class="box center box-f1 box-ver box-ac box-jc">
                <div class="icon icon-arrow-two"></div>
                <div class="">(共{{item.countDateNum + 1}}天)</div>
              </div>
              <div class="from box-ver box box-ac">
                <div class="area">{{item.to}}</div>
                <div class="">{{item.endDate}}</div>
              </div>
            </div>
            <div class="person tc-333 ell" v-html="item.travelPersonShow">
            </div>
            <div class="cause tc-888 ell">{{item.cause}}</div>
          </div>
        </div>
      </div>
      <div v-if="travelList.length > 0" class="box tc-666 box-ac total">
        <div @click="checkAll()" class="box box-ac">
          <div :class="{act: bizAccountBill.marchInfos.length === travelList.length}" class="icon icon-checkbox"></div>
          <div >全选</div>
        </div>
        <div class="box-f1 tx-r">
          （请选择出差类型相同的行程）&nbsp;
        </div>
        <div>
          已选择
          <span class="tc-main">{{bizAccountBill.marchInfos.length}}</span>
          程
        </div>
      </div>
      <div @click="next()" class="btn-bot">第二步 填写报销信息</div>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import { formatDate } from '@/assets/js/filters'
import { filterList, countDate } from '@/assets/js/common'
import { getEvectionReqBills } from '@/assets/js/api'
import empty from '@/components/empty.vue'
export default {
  name: 'caiBaoStep1',
  components: {
    empty
  },
  data () {
    return {
      travelList: []
    }
  },
  computed: {
    ...mapState(['userNum', 'bizAccountBill'])
  },
  mounted () {
    this.getEvectionReqBills()
  },
  methods: {
    checkAll () {
      // console.log(this.travelList.length)
      if (this.bizAccountBill.marchInfos.length === this.travelList.length) {
        this.travelList.forEach(item => {
          item.checked = false
        })
        this.bizAccountBill.marchInfos = []
      } else {
        this.travelList.forEach(item => {
          item.checked = true
        })
        this.bizAccountBill.marchInfos = this.travelList
      }
    },
    checkItem (index) {
      this.travelList[index].checked = !this.travelList[index].checked
      let marchInfos = []
      this.travelList.forEach(item => {
        if (item.checked) marchInfos.push(item)
      })
      this.bizAccountBill.marchInfos = marchInfos
    },
    initTravelList (list) {
      let now = formatDate(new Date(), 'yyyy-MM-dd')
      let data = list.filter(item => {
        return (item.state && (+item.state) === 60 && countDate(now, item.createtime.split(' ')[0]) < 90)
      })
      this.travelList = data.map(item => {
        let checked = false
        this.bizAccountBill.marchInfos.forEach(item1 => {
          if (
            item1.number === item.number &&
            item1.to === item.to &&
            item1.startDate === item.startDate &&
            item1.endDate === item.endDate &&
            item1.from === item.from) checked = true
        })
        item.countDateNum = countDate(item.endDate, item.startDate)
        item.travelPersonShow = item.travelPerson.join(`<span class="tc-999"> | </span>`)
        item.travelPerson = item.travelPerson.map(item => {
          return {
            userName: item,
            zsInvoice: {
              num: 0,
              money: 0,
              list: []
            }
          }
        })
        item.checked = checked
        return item
      })
      if (this.travelList.length === 0) {
        this.$tools.openToast({
          msg: '暂无单据',
          duration: 3000
        })
      }
      // console.log('this.travelList>>>', this.travelList)
    },
    // 获取我的行程
    getEvectionReqBills () {
      if (localStorage.getItem('getEvectionReqBills')) {
        let list = JSON.parse(localStorage.getItem('getEvectionReqBills'))
        this.initTravelList(list)
        setTimeout(() => {
          this.$store.commit('isLoading', false)
        }, 10)
      }
      getEvectionReqBills({
        userNum: this.userNum,
        startDay: JSON.stringify(['2017-01-01', '2030-01-01'])
      }, list => {
        localStorage.setItem('getEvectionReqBills', JSON.stringify(list))
        this.initTravelList(list)
      })
    },
    next () {
      if (this.bizAccountBill.marchInfos.length < 1) {
        this.$tools.openToast({
          msg: '请先选择行程',
          duration: 3000
        })
        return
      }
      this.$store.commit('bizAccountBill', {
        cause: this.bizAccountBill.marchInfos[0].cause,
        marchInfos: this.bizAccountBill.marchInfos
      })
      this.$router.push({
        path: '/caiBaoStep2'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.content{
  padding-top:.3rem;
  padding-bottom:.2rem;
}
.item{
  padding:.15rem .3rem;
  .checkbox{
    width:1.1rem;
  }
  .item-content{
    background-color:#FFF;
    font-size:.26rem;
    margin-bottom:.25rem;
    color:#333;
    border-radius:.2rem;
    overflow: hidden;
    width:6.2rem;
    .info{
      padding:.1rem .3rem .3rem .3rem;
      color:#FFF;
    }
    .area{
      font-size:.42rem;
      padding: .2rem 0;
    }
    .icon-arrow-two{
      width:.5rem;
      height:.5rem;
      margin-top:.2rem;
      margin-bottom:.2rem;
      @include bg-image('../assets/images/icon-arrow-two-white');
    }
    .person{
      padding:.2rem .3rem;
      font-size:.3rem;
    }
    .cause{
      padding:.3rem;
      padding-top:0;
      padding-bottom:.3rem;
    }
  }
}
.total{
  height:.9rem;
  padding:0 .5rem;
  padding-left: .3rem;
  background-color:#FFF;
  font-size:.24rem;
  .icon-checkbox{
    margin-right:.1rem;
  }
}
.btn-bot{
  @include btn(100%, 1rem, .36rem);
}
</style>
